<template>
  <div>
    <Header @changelang="changeLanguage"></Header>
    <div class="section">

      <section class="billboard">
        <video class="covervid-video" autoplay loop muted poster="../../static/home/img/topbanner06.jpg" style="width: 1920px;height: 1080px;position: absolute;top: 50%;left: 50%;z-index: -1; transform: translate(-50%, -50%);">
          <source src="../../static/home/img/response.mp4" type="video/mp4">
        </video>
        <div class="covervid-bg"></div>
        <p class="covervid-text1">{{$t('l.new_home')}}</p>
        <p class="covervid-text2">{{$t('l.new_home_1')}}</p>
        <div class="covervid-btn" @click="isLogin ? $router.push('/trade') : $router.push('/login')">{{$t('l.new_home_2')}}</div>
        <div class="covervid-icon"></div>
      </section>

    	<section class="features">
    		<div class="wrapper">

    				<div class="feature">
              <div class="feature-top">
                <img class="ficon" src="../../static/home/img/ficon1.png"></img>
                <p class="ftext1">{{$t('l.new_home_3')}}</p>
                <p class="ftext2">{{$t('l.new_home_4')}}</p>
              </div>
              <div class="feature-bottom">
                {{$t('l.new_home_5')}}<br /><br />
                {{$t('l.new_home_6')}}<br /><br />
                {{$t('l.new_home_7')}}
              </div>
    				</div>

    				<div class="feature">
              <div class="feature-top">
                <img class="ficon" src="../../static/home/img/ficon2.png"></img>
                <p class="ftext1">{{$t('l.new_home_8')}}</p>
                <p class="ftext2">{{$t('l.new_home_9')}}</p>
              </div>
              <div class="feature-bottom">
                {{$t('l.new_home_10')}}<br /><br />
                {{$t('l.new_home_11')}}<br /><br />
                {{$t('l.new_home_12')}}
              </div>
    				</div>

    				<div class="feature">
    					<div class="feature-top">
    					  <img class="ficon" src="../../static/home/img/ficon3.png"></img>
                <p class="ftext1">{{$t('l.new_home_13')}}</p>
                <p class="ftext2">{{$t('l.new_home_14')}}</p>
    					</div>
    					<div class="feature-bottom">
                {{$t('l.new_home_15')}}<br /><br />
                {{$t('l.new_home_16')}}
              </div>
    				</div>

            <div style="clear: both;"></div>

    			</div>

    	</section>

    	<section class="testimonials">
        <div class="wrapper">
          <p class="ttext1">{{$t('l.new_home_17')}}</p>
          <p class="ttext2">{{$t('l.new_home_18')}}</p>
          <div class="feature-box">
            <div class="feature">
              <img class="ticon" src="../../static/home/img/ticon1.png" alt="" />
              <p class="ttext3">{{$t('l.new_home_19')}}</p>
              <div class="tbtn" @click="$router.push('/news')">{{$t('l.new_home_22')}}</div>
            </div>
            <div class="feature">
              <img class="ticon" src="../../static/home/img/ficon2.png" alt="" />
              <p class="ttext3">{{$t('l.new_home_20')}}</p>
              <div class="tbtn" @click="$router.push('/trade')">{{$t('l.new_home_22')}}</div>
            </div>
            <div class="feature">
              <img class="ticon" src="../../static/home/img/ticon3.png" alt="" />
              <p class="ttext3">{{$t('l.new_home_21')}}</p>
              <div class="tbtn" @click="$router.push('/register')">{{$t('l.new_home_22')}}</div>
            </div>
            <div style="clear: both;"></div>
          </div>
        </div>
        <div style="clear: both;"></div>
    	</section>

      <section class="safe">
        <div class="wrapper">
          <p class="safe-title">{{$t('l.new_home_23')}}</p>
          <p class="safe-label">{{$t('l.new_home_24')}}</p>
          <p class="safe-text">{{$t('l.new_home_25')}}</p>
          <img class="safe-img" src="../../static/home/img/safe.png" alt="" />
          <p class="safe-tip1">{{$t('l.new_home_26')}}<span class="safe-tip1-other">{{$t('l.new_home_27')}}</span></p>
          <p class="safe-tip2">{{$t('l.new_home_28')}}</p>
          <p class="safe-tip3">{{$t('l.new_home_29')}}</p>
          <p class="safe-tip-text">{{$t('l.new_home_30')}}
          <br /><br />
{{$t('l.new_home_31')}}
          <br /><br />
{{$t('l.new_home_32')}}</p>
        </div>
      </section>

      <section class="management">
        <div class="wrapper">
          <p class="management-title">{{$t('l.new_home_33')}}</p>
          <p class="management-tip1">{{$t('l.new_home_34')}}</p>
                    <p class="management-tip2">{{$t('l.new_home_35')}}<span class="management-tip2-other">{{$t('l.new_home_36')}}</span></p>
                    <p class="management-text">{{$t('l.new_home_37')}}
                    <br /><br />
          {{$t('l.new_home_38')}}</p>
          <img class="management-img" src="../../static/home/img/mangement.png" alt="" />
          <div class="management-box">
            <p class="box-title1">{{$t('l.new_home_39')}}</p>
            <p class="box-title2">{{$t('l.new_home_40')}}</p>
            <p class="box-label">{{$t('l.new_home_41')}}<span class="box-label-other">{{$t('l.new_home_42')}}</span></p>
            <p class="box-text">{{$t('l.new_home_43')}}</p>
            <p class="box-tip">{{$t('l.new_home_44')}}</p>
            <p class="box-tip-text">{{$t('l.new_home_45')}}
            <br />
            <span class="box-tip-text-icon"></span>{{$t('l.new_home_46')}} : <a href="mailto:admin@qtglobal.cc">admin@qtglobal.cc</a>
            <br />
            <span class="box-tip-text-icon"></span>{{$t('l.new_home_48')}}
            <br />
            <span class="box-tip-text-icon"></span>{{$t('l.new_home_49')}}
            <br/><br/>
            {{$t('l.new_home_50')}}
            </p>
          </div>
          <img class="management-bg" src="../../static/home/img/earth.png" alt="" />
        </div>
      </section>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/header";
import Footer from "../components/footer";
import commonMixins from "@/mixins";
import Swiper from 'swiper';
import {api} from '@/api/api';
import 'swiper/dist/css/swiper.css';

export default {
    mixins: [commonMixins],
    components: {
        Header,
        Footer
    },
    computed: {
      isLogin() {
        return this.$store.state.usertoken ? true : false;
      }
    },
    watch:{
    },
    data () {
        return {
        }
    },
    created(){
    },
    methods:{
      next_fn() {
        if(this.isLogin) {
          this.$router.push('trade');
        } else {
          this.$router.push('login');
        }
      },
    }
}
</script>

<style lang="less" scoped="scoped">

</style>
